<template>
    <div class="timing">
      <el-row style="margin-bottom:10px;display: none;">
        <el-col :span="24">
          <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
            <el-form-item label="key">
              <el-input v-model="formInline.dataModelName" clearable placeholder="请输入数据库名称" />
            </el-form-item>
            <el-form-item>
              <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!-- 按钮 -->
      <el-row style="margin-bottom:10px;">
        <el-col :span="24">
          <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />创建表头设计</el-button>
        </el-col>
      </el-row>
      <!-- 表格 -->

      <admincentertb ref="httbRef"
       :btn-is-show="btnIsShow" 
       :table-col="tabUserList" 
       :table-data="tableUserData" 
       @getDataDetileInfo="getDataDetileInfo" 
       @deleteSelectData="deleteSelectData"
       @refresh="getUserList"/>
     

      <!-- 分页 -->
      <div style="text-align:right;margin-top:10px;display: none;">
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
  
      <el-dialog :close-on-click-modal="false" :title="title" width="50%" :visible.sync="dialogTableVisible">
          <!-- 名称和路径必输 -->
                  <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm autoClass">
                  <el-form-item label="key" prop="jsonKey">
                    <el-input :disabled="disFlag" v-model="ruleForm['jsonKey']" clearable placeholder="" />
                  </el-form-item>
                  <el-form-item label="key中文名" prop="jsonValue">
                    <el-input :disabled="disFlag" v-model="ruleForm['jsonValue']" clearable placeholder="" />
                  </el-form-item>
                  <el-form-item label="字段所处位置" prop="place">
                    <el-select clearable multiple v-model="ruleForm['place']">
                      <el-option
                        v-for="(childItem,index) in placeTypeOptions"
                        :key="index"
                        :label="childItem.name"
                        :value="childItem.place"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="父节点id" prop="pid">
                    <el-cascader
                      popper-class="default-scrollbar__wrap"
                      style="width: 100%;"
                      v-model="ruleForm['pid']"
                      :props="cascaderProp3"
                      :options="tableUserData"
                    ></el-cascader>
                  </el-form-item>
                  <el-form-item label="key类型" prop="type">
                    <el-select clearable v-model="ruleForm['type']">
                      <el-option
                        v-for="(childItem,index) in keyTypeOptions"
                        :key="index"
                        :label="childItem.jsonTitle"
                        :value="childItem.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="计算公式" v-if="ruleForm['type']=='bfb'" prop="designFormulas">
                    <el-input :disabled="disFlag" v-model="ruleForm['designFormulas']" clearable placeholder="" />
                  </el-form-item>
                  <el-form-item label="排序" prop="sort">
                    <el-input :disabled="disFlag" v-model="ruleForm['sort']" clearable placeholder="" />
                  </el-form-item>
                  <el-form-item v-if="ruleForm['type']=='select'" label="下拉选项" prop="selectItem">
                    <el-select clearable v-model="ruleForm['selectItem']">
                      <el-option
                        v-for="(childItem,index) in listConfig"
                        :key="index"
                        :label="childItem.jsonTitle"
                        :value="childItem.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item v-if="ruleForm['type']=='connector'" label="查询地址" prop="selectItem">
                    <el-input v-model="ruleForm['selectItem']" clearable placeholder="" />
                  </el-form-item>
                  <el-form-item  v-if="ruleForm['type']=='connector'" label="请求方式" prop="method">
                    <el-radio :disabled="disFlag" v-model="ruleForm['method']" label="post">post</el-radio>
                    <el-radio :disabled="disFlag" v-model="ruleForm['method']" label="get">get</el-radio>
                  </el-form-item>
                  <el-form-item style="width: 100%;" v-if="ruleForm['type']=='connector'" label="请求参数" prop="param">
                    <vueJsonEditor @has-error="jsonchange" @json-change = "jsonchange"  v-model="ruleForm['param']"/>
                    <p v-if="isDisable" style="color: red;">格式有误</p>
                  </el-form-item>
                  <el-form-item label="是否必填" prop="required">
                    <el-radio :disabled="disFlag" v-model="ruleForm['required']" :label="true">是</el-radio>
                    <el-radio :disabled="disFlag" v-model="ruleForm['required']" :label="false">否</el-radio>
                  </el-form-item>
                  <el-form-item label="备注" prop="remarks">
                    <el-input type="textarea" :disabled="disFlag" v-model="ruleForm['remarks']" clearable placeholder="" />
                  </el-form-item>
              </el-form>
                <div style="text-align: center;">
                  <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                  <el-button @click="resetForm('return')">返回</el-button>
                </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  import { basictreeList,basicadd, basicremove,basicupdate,basicLoadlibraryList,dicselectList,dicdataTypeList,fromlist
  } from '@/api/home_/adminCenter'
  import experiment from '@/mixins/experiment'
  import vueJsonEditor from 'vue-json-editor'
  import qtheadertable from '../components/qt_header_table.vue'
  export default {
    components: {qtheadertable,vueJsonEditor},
    mixins: [experiment],
    data() {
      return {
        placeTypeOptions:[],
        cascaderProp3: {
          value: 'id',
          label: 'jsonKey',
          children: 'children',
          checkStrictly: true,
        },
        keyTypeOptions:[],
        listConfig:[],
        btnIsShow: {
          operate: true,
          detile: false,
          del: true
        },
        elradioOptionsa:[],
        ruleForm2:{
  
        },
        title: '新增',
        rules: {
        },
        dialogTableVisible: false,
        ruleForm: {
          "designFormulas":'',
          "children": [],
          "createTime": "",
          "param":"",
          "deleteTime": "",
          "id": "",
          "jsonKey": "",
          "jsonValue": "",
          "pid": "",
          "place": "",
          "remarks": "",
          "method":"",
          "required": true,
          "selectItem": "",
          "sort": 0,
          "type": "",
          "updateTime": ""
        },
        userId: '',
        formInline: {
          'dataModelName': '',
          'dataModelTypeId': ''
        },
        addParms: [],
        addParms2: [],
        tableUserData: [],
        fullscreenLoading:false,
        tabUserList: [
          {
            key: 'jsonKey',
            title: 'key'
          },
          {
            key: 'jsonValue',
            title: 'key中文名'
          },
          {
            key: 'required',
            title: '是否必填'
          },
          {
            key: 'status',
            title: '表单状态'
          },
          {
            key: 'remarks',
            title: '备注'
          }
        ],
        total: 0,
        size: 10,
        page: 1
      }
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.getUserList()
        dicselectList({}).then(res=>{
            this.listConfig = res.data
        })
        dicdataTypeList({}).then(res=>{
            this.keyTypeOptions = res.data
        })
        fromlist({}).then(res=>{
          this.placeTypeOptions = res.data
        })
      })
    },
    methods: { 
      deleteSelectData(v) {
        basicremove(v.id).then(res => {
          if (res.code == 200) {
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      },
      handleNodeClick(data) {
        console.log(data)
      }, 
      commitFromData() {
        let nps = JSON.parse(JSON.stringify(this.ruleForm))
        if(Array.isArray(this.ruleForm['pid'])){
          nps['pid'] = nps.pid[nps['pid'].length-1]
        }else{
          nps['pid'] = ''
        }
        nps.place = nps.place.join(',')
        if(nps.type!='connector'){
          nps.method = ""
          nps.param = {}
        }
        nps.param = JSON.stringify(nps.param)
        if(this.title=='新增'){
          basicadd(nps).then(res => {
            if (res.code == 200) {
              this.$message.success(res.msg)
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        }else{
          basicupdate(nps).then(res => {
            if (res.code == 200) {
              this.getUserList()
            } else {
              this.errorDialog(res.msg)
            }
          })
        }
        this.dialogTableVisible = false
      },
      handleSizeChange(v) {
        this.size = v
        this.getUserList()
      },
      handleCurrentChange(v) {
        this.page = v
        this.getUserList()
      },
  
      // 获取用户列表
      getUserList2222222() {
        this.dialogTableVisible = false
        basicLoadlibraryList({pgIndex:1,pgSize:10,place:'test'}).then(res => {
          
        })
      },
      
      getUserList() {
        this.$refs.httbRef.isShowLoading(true)
        basictreeList({}).then(res => {
          this.tableUserData = res.data
          this.$refs.httbRef.isShowLoading(false)
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    @import "~@/assets/styles/auto.scss";
        .info{
          margin-top: 20px;
        }
        .info>p{
          padding:4px 0;
          margin-left:80px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
        .info>p:nth-child(1){
          color: #474747;
          font-weight: bold;
          background: #f1f4f7;
          padding-left: 0px;
        }
        .info>p>label{
          display: inline-block;
          width:35%;
        }
        .info>p>span{
          color:#494949;padding: 2px 4px;
          border-radius: 2px;font-size: 12px;
          background: #f0f0f0;
        }
      .ztree {
          margin-left:80px;
          border:1px solid #efefef;
          padding: 4px;
          border-radius: 2px;
          min-height: 270px;
          height: 300px;
          overflow-y: scroll;
      }
      .resoceDialog{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
      }
      .resoceDialog>div>p{
        color: #464646;
        padding: 10px 0;
        font-weight: bold;
        // background: #f1f4f7;
        margin-left:26px;
        padding-left:0px;
        margin-bottom: 5px;
        text-align: right;
      }
        >>>.jsoneditor-poweredBy {
          display: none !important;
        }
  
        .addPs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
          >div{
            width:50%
          }
          span{
            display: inline-block;
            width: 10%;
          }
        }
        .autoClass{
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
        }
        .autoClass .el-form-item{
          width:50%;
        }
        .addcs{
          display: flex;
          flex-direction: row;
          margin-bottom: 10px;
        }
        .addcs2 .el-select {
          display: inline-block;
          width: 240px;
        }
        .autoInput{
          display: inline-block;
          width: 70%;
        }
        .infoTitle{
          border-bottom:1px solid #e5e5e5;
          margin-bottom: 30px;
          position: relative;
        }
        .infoTitle>span{
          position: absolute;
          left: 20px;
          background: #fff;
          width:80px;
          top:-15px;
          height:30px;
          text-align: center;
          line-height: 30px;
        }
          .el-select{
             width:100%;
          }
          .timing{
            background:#fff;
            padding:20px;
          }
        </style>
  